<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      inline
      v-show="showSearch"
      label-width="68px"
      @submit.native.prevent
    >
      <el-form-item label="产品名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入产品名称"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          查询
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
    <div class="add-box">
      <el-button type="primary" plain size="mini" @click="handleAdd">添加产品</el-button>
      <el-button
        type="danger"
        plain
        size="mini"
        :disabled="ids.length == 0"
        @click="handleDel()"
        >删除产品</el-button
      >
    </div>
    <el-table
      v-loading="loading"
      border
      :data="dataList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" width="55" />
      <el-table-column label="产品名称" align="center" prop="name" />
      <el-table-column label="产品规格" align="center" prop="specifications" />
      <el-table-column label="固定带宽" align="center" prop="bandwidth" />
      <el-table-column label="数据中心" align="center" prop="dataCenter" />
      <el-table-column label="时长" align="center" prop="duration" />
      <el-table-column label="价格" align="center" prop="price" />
      <el-table-column label="置顶" align="center">
        <template slot-scope="scope">
          <el-button
            :type="scope.row.isTop ? 'primary' : 'info'"
            plain
            size="mini"
            @click="handleTop(scope.row)"
          >
            {{ scope.row.isTop ? "取消置顶" : "置顶" }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button type="text" size="mini" @click="handleDel(scope.row)"
            >删除</el-button
          >
          <el-button type="text" size="mini" @click="handleView(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页  -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加 & 修改 -->
    <el-dialog
      :title="editForm.id ? '修改产品' : '添加产品'"
      :visible.sync="editShow"
      width="40%"
      :close-on-click-modal="false"
    >
      <el-form ref="editForm" :model="editForm" label-width="100px" :rules="rules">
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="editForm.name" placeholder="请输入产品名称" />
        </el-form-item>
        <el-form-item label="产品规格" prop="specifications">
          <el-input v-model="editForm.specifications" placeholder="请输入产品规格" />
        </el-form-item>
        <el-form-item label="固定带宽" prop="bandwidth">
          <el-input v-model="editForm.bandwidth" placeholder="请输入固定带宽" />
        </el-form-item>
        <el-form-item label="数据中心" prop="dataCenter">
          <el-input v-model="editForm.dataCenter" placeholder="请输入数据中心" />
        </el-form-item>
        <el-form-item label="时长" prop="duration">
          <el-input v-model="editForm.duration" placeholder="请输入时长" />
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="editForm.price" placeholder="请输入价格" />
        </el-form-item>
        <el-form-item label="链接地址" prop="jumpUrl">
          <el-input v-model="editForm.jumpUrl" placeholder="请输入链接地址" />
        </el-form-item>
        <el-form-item label="产品描述" prop="description">
          <el-input
            v-model="editForm.description"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入产品描述"
          />
        </el-form-item>
        <el-form-item label="产品标签" prop="label">
          <el-tag
            v-for="(tag, index) in editForm.label"
            :key="index"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="tagShow"
            v-model="tagInput"
            ref="tagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput"
            >+ 新增</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="详情" :visible.sync="detailShow" width="50%" :close-on-click-modal="false">
      <el-form :model="detailRow" label-width="100px">
        <el-form-item label="产品名称" prop="name">
          {{ detailRow.name || "-" }}
        </el-form-item>
        <el-form-item label="产品规格" prop="specifications">
          {{ detailRow.specifications || "-" }}
        </el-form-item>
        <el-form-item label="固定带宽" prop="bandwidth">
          {{ detailRow.bandwidth || "-" }}
        </el-form-item>
        <el-form-item label="数据中心" prop="dataCenter">
          {{ detailRow.dataCenter || "-" }}
        </el-form-item>
        <el-form-item label="时长" prop="duration">
          {{ detailRow.duration || "-" }}
        </el-form-item>
        <el-form-item label="价格" prop="price">
          {{ detailRow.price || "-" }}
        </el-form-item>
        <el-form-item label="链接地址" prop="jumpUrl">
          {{ detailRow.jumpUrl }}
        </el-form-item>
        <el-form-item label="产品描述" prop="description">
          {{ detailRow.description || "-" }}
        </el-form-item>
        <el-form-item label="产品标签" prop="label">
          <el-tag
            v-for="(tag, index) in detailRow.label"
            :key="index"
            type="info"
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="detailShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listHuaweiCloudList,
  addHuaweiCloud,
  updateHuaweiCloud,
  delHuaweiCloud,
  topHuaweiCloud,
} from "@/api/system/huaweicloud";

export default {
  data() {
    return {
      loading: false, // 遮罩层
      showSearch: true, // 显示搜索条件
      total: 0, // 总条数
      ids: [], // 选中ID
      dataList: [], // 表格数据
      // 查询参数
      queryParams: {
        name: "",
        pageNum: 1,
        pageSize: 10,
      },
      detailRow: {}, //详情内容
      detailShow: false, //详情弹窗开关
      editShow: false, //添加弹窗开关
      editForm: {
        label: [],
      }, //添加的内容
      rules: {
        //添加表单验证
        name: [{ required: true, message: "请输入产品名称", trigger: "change" }],
        specifications: [
          { required: true, message: "请输入产品规格", trigger: "change" },
        ],
        bandwidth: [{ required: true, message: "请输入固定带宽", trigger: "change" }],
        dataCenter: [{ required: true, message: "请输入数据中心", trigger: "change" }],
        duration: [{ required: true, message: "请输入时长", trigger: "change" }],
        price: [{ required: true, message: "请输入价格", trigger: "change" }],
        jumpUrl: [{ required: true, message: "请输入链接地址", trigger: "change" }],
        description: [{ required: true, message: "请输入产品描述", trigger: "change" }],
      },
      tagShow: false, // 标签输入框显示
      tagInput: "", // 标签输入框
    };
  },
  created() {
    //获取表格数据
    this.getList();
  },
  methods: {
    /**多选 */
    handleSelectionChange(val) {
      this.ids = val.map((item) => item.id);
    },
    /**删除分类 */
    handleDel(row) {
      let ids = row ? row.id : this.ids.join(",");
      this.$modal
        .confirm(`是否确认删除选中产品?`)
        .then(() => {
          delHuaweiCloud(ids).then((res) => {
            if (200 == res.code) {
              this.$message.success("删除成功！");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    /**添加弹窗 */
    handleAdd() {
      this.editForm = {
        label: [],
      };
      this.editShow = true;
      this.resetForm("editForm");
    },
    /**修改弹窗 */
    handleUpdate(row) {
      this.editForm = Object.assign({}, row);
      this.editShow = true;
    },
    /**确认添加 & 修改 */
    handleSubmit() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          const request = this.editForm.id ? updateHuaweiCloud : addHuaweiCloud;
          let data = Object.assign({}, this.editForm);
          data.label = data.label.join(",");
          request(data).then((res) => {
            if (200 == res.code) {
              this.getList();
              this.editShow = false;
              this.$message.success(this.editForm.id ? "修改成功" : "添加成功");
            }
          });
        }
      });
    },
    /**关闭编辑弹窗 */
    cancelForm() {
      this.editForm = {
        label: [],
      };
      this.resetForm("editForm");
      this.editShow = false;
    },
    /**查看详情 */
    handleView(row) {
      this.detailRow = Object.assign({}, row);
      this.detailShow = true;
    },
    /**置顶产品 */
    handleTop(row) {
      this.$modal
        .confirm(`是否【${row.isTop ? "取消置顶" : "置顶"}】该产品?`)
        .then(() => {
          topHuaweiCloud({
            id: row.id,
            isTop: !row.isTop,
          }).then((res) => {
            if (200 == res.code) {
              this.$message.success("操作成功！");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    /** 查询首页产品信息列表 */
    getList() {
      this.loading = true;
      listHuaweiCloudList(this.queryParams)
        .then((res) => {
          this.dataList = res.rows.map((i) => {
            return {
              ...i,
              label: i.label ? i.label.split(",") : [],
            };
          });
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    // 删除标签
    handleClose(tag) {
      this.editForm.label.splice(this.editForm.label.indexOf(tag), 1);
    },

    // 显示标签输入框
    showInput() {
      this.tagShow = true;
      this.$nextTick((_) => {
        this.$refs.tagInput.$refs.input.focus();
      });
    },

    // 保存标签
    handleInputConfirm() {
      let tagInput = this.tagInput;
      if (tagInput) {
        this.editForm.label.push(tagInput);
      }
      this.tagShow = false;
      this.tagInput = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.add-box {
  margin-bottom: 20px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
